<template>
  <view>
    <u-form labelPosition="left" :model="form" ref="form">
      <u-form-item
          label="还款时间"
          prop="repaymentTime"
          borderBottom
          ref="item1"
          labelWidth="65"
          @click="showRepaymentTime = true; "
      >
        <u-input
            v-model="time"
            placeholder="请输入借款日期"
            disabled
            disabledColor="#ffffff"
            border="none"
        ></u-input>
        <u-icon
            slot="right"
            name="arrow-right"
        ></u-icon>
      </u-form-item>
      <u-form-item
          label="借款用途"
          prop="owedUse"
          borderBottom
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.owedUse"
            placeholder="请输入借款用途"
            border="none"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="欠款金额"
          prop="owedMoney"
          borderBottom
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.owedMoney"
            placeholder="请输入欠款金额"
            border="none"
            type="digit"
        ></u-input>
      </u-form-item>

      <u-form-item
          label="利息"
          prop="interest"
          borderBottom
          ref="item1"
          labelWidth="65"
          @click="showIntrestType = true; "
      >
        <u-input
            v-model="form.interest"
            disabled
            placeholder="请选择利息方式"
            disabledColor="#ffffff"
            border="none"
        ></u-input>
        <u-icon
            slot="right"
            name="arrow-right"
        ></u-icon>
      </u-form-item>
      <u-form-item
          label="利息标准"
          prop="standard"
          borderBottom
          ref="item1"
          labelWidth="65"
          v-if="showIntrestMoney"
      >
        <u-input
            v-model="standard"
            placeholder="请输入约定的利息标准"
            border="none"
            type="digit"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="已支付利息"
          prop="interestAll"
          borderBottom
          ref="item1"
          labelWidth="95"
      >
        <u-input
            v-model="form.interestAll"
            placeholder="请输入已支付的总额"
            border="none"
            type="digit"
        ></u-input>
      </u-form-item>

      <u-form-item
          label="签署方式"
          prop="IOUs"
          borderBottom
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.IOUs"
            placeholder="请输入借款签署方式"
            border="none"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="借款交付方式"
          prop="repayType"
          borderBottom
          ref="item1"
          labelWidth="95"
      >
        <u-input
            v-model="form.repayType"
            placeholder="请输入借款交付方式"
            border="none"
        ></u-input>
      </u-form-item>
    </u-form>
    <u-action-sheet
        :show="showIntrestType"
        :actions="intrestActions"
        title="请选择利息方式"
        @close="showIntrestType = false"
        @select="sexSelectIntrestType"
    >
    </u-action-sheet>

    <u-datetime-picker
        ref="datetimePicker"
        :show="showRepaymentTime"
        v-model="time"
        mode="date"
        :formatter="formatter"
        @cancel="showRepaymentTime = false"
        @confirm="confirmRepayTime"
    ></u-datetime-picker>
  </view>
</template>

<script>
export default {
  name: "fact",
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      newForm: {},
      showLawsuitType: false,
      showIntrestType: false,
      showIntrestMoney: false,
      showRepaymentTime: false,
      time:"",
      standard: "",
      intrestActions: [{
        name: '无利息',
      },
        {
          name: '有利息',
        },
      ],
    };
  },
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    this.$nextTick(() => {
      this.$refs.datetimePicker.setFormatter(this.formatter);
    });
  },
  watch: {
    newForm(val, oldVal){
      this.$emit('updateForm', val)
    },
    form(){
      this.newForm = this.form;
    },
    time(val, oldVal){
      //将时间戳转换为时间
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      //如果月份小于10，前面补0
      if (month < 10) {
        month = "0" + month;
      }
      //如果日期小于10，前面补0
      if (day < 10) {
        day = "0" + day;
      }
      this.time= year + "-" + month + "-" + day + " ";
      this.form.repaymentTime = this.time;
      this.showRepaymentTime = false;
    },
    standard(val, oldVal){
      if(this.form.interest == '有利息'){
        this.form.interestTemp = val
      }
    }
  },
  mounted() {
    this.newForm = this.form;
  },
  methods:{
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    sexSelectIntrestType(e) {
      this.form.interest = e.name
      this.$refs.form.validateField('interest')
      this.showIntrestMoney = e.name == '有利息'
    },
    confirmRepayTime(value) {
      // //将时间戳转换为时间
      // let date = new Date(value.value);
      // let year = date.getFullYear();
      // let month = date.getMonth() + 1;
      // let day = date.getDate();
      //
      // if (month < 10) {
      //   month = "0" + month;
      // }
      // //如果日期小于10，前面补0
      // if (day < 10) {
      //   day = "0" + day;
      // }
      //
      // let time = year + "-" + month + "-" + day + " ";
      // this.form.repaymentTime = time;
      // this.showRepaymentTime = false;
    },
  }
}
</script>

<style scoped>

</style>